今天可以再來玩一些Canvas的功能
1.更改畫筆的顏色,讓畫筆畫出彩虹的顏色
這邊是使用HSL色彩概念,
HSL即色相、飽和度、亮度(hue,Saturation,Lightness)
hue色相---
紅色為0度(360度);黃色為60度;綠色為120度;
青色為180度;藍色為240度;品紅色為300度。
也就是hue在每360度就會有一次循環。
所以可以設定一個變數
let hue = 0;
在draw函式將hue++,並在達到360時歸零,重新計算
function draw(e) {
...
lastY = e.offsetY;
hue++;
if (hue > 360) {
hue = 0;
}
}
這樣畫筆的顏色就會持續不斷的替換。
2.動態更改畫筆的粗細度
ctx.lineWidth = "1"; // 畫筆的粗細
如果只是在draw函式,將ctx.lineWidth++,這樣畫筆粗度會無限加大,
我希望是加粗到一個程度,會再慢慢變細。
所以可以設定一個變數來確認現在是要讓畫筆粗細,
向上增加還是向下遞減
let direction = true;
在畫筆粗細大於 >=100 或者 畫筆粗細 <= 1 時
direction變數會轉換成false,
同時也帶動畫筆粗細要遞增或遞減,
這樣就能夠控制畫筆粗細介於 1~100之間
function draw(e) {
...
if (hue > 360) {
hue = 0;
}
if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
direction = !direction;
}
if (direction) {
ctx.lineWidth++;
} else {
ctx.lineWidth--;
}
}
今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30